import React from 'react';
import './index.less';
import render from 'src/hrpub/common/frame/render';
import {connect} from 'src/hrpub/common/store';
import {
    base
} from 'nc-lightapp-front';
import HRBack from 'src/hrpub/common/components/hr-back/index';
import {COMMON} from "../../../../unit/util";
import HeaderAction from "./actions"

const {
    NCInput,
    NCButton
} = base;

/**
 * 需求的参数 pageParam：{
 *                          index: 1, // <number> 导出按钮 右边的下拉列表的显示
 *                      }
 *           searchVal: '' // <string> 搜索所属组织/人员类别
 *           searchValChange: ()=>{} // <funtion> 搜索所属组织/人员类别 值改变的函数
 *           clickAdv: ()=>{} // <funtion> 高级显示与否
 */

const DetailHeader = render({
    actions: {
        headerAct: HeaderAction
    },
    state: {
        showDropList: false,
        rotateAdvIcon: null,  //高级按钮
        rotateMoreIcon: null, //more下拉列表
    }
})(({props, action, state}) => {
    const {staffCom} = props;
    const buttonMore = [
        {key: COMMON.pageTotal, label: 'gx6008-000154'}, //人员信息简表
        {key: COMMON.pageEntry, label: 'gx6008-000155'}, //入职明细表
        {key: COMMON.pageDimission, label: 'gx6008-000156'}, //离职明细表
        {key: COMMON.pageChange, label: 'gx6008-000157'}  //变动明细表
    ];
    let curIndex = 0;
    let showAdvBtn = !buttonMore.every((item,index)=>{
        let cur = staffCom.page;
        if(cur === item.key){
            curIndex = index;
        }
        return cur !== item.key;
    });
    const searchShow = [COMMON.pageTotal, COMMON.pageEntry, COMMON.pageDimission, COMMON.pageChange, COMMON.pageReg];
    const titleTxt = {
        [COMMON.pageTotal]:'gx6008-000129',//当前人数
        [COMMON.pageEntry]:'gx6008-000130',//本月已入职
        [COMMON.pageDimission]:'gx6008-000131',//本月已离职
        [COMMON.pageChange]:'gx6008-000132',//本月变动
        [COMMON.pageReg]:'gx6008-000133',//待转正
        [COMMON.pageAgeEdu]:'gx6008-000180',//年龄与学历结构
        [COMMON.pageEntryDimission]:'gx6008-000181',//入离职趋势
        [COMMON.pageRankStr]:'gx6008-000182',//职级结构
        [COMMON.pageStaffChange]:'gx6008-000183',//人员变动分析
        [COMMON.pageSubdetail]:'gx6008-000193',//详情
    };
    let title=staffCom.language[(titleTxt[staffCom.page])];
    return (
        <div className={'detail-header'}>
            <div className={'detail-left'}>
                <HRBack onClick={action.headerAct.backToList} title={''}/>
                <span className={'title'}>{title}</span>
                <If condition={staffCom.page !== COMMON.pageSubdetail}>
                    <div className={'detail-search'}>
                        <If condition={searchShow.includes(staffCom.page)}>
                            <div className={'search-box'}>
                                <NCInput type="text" placeholder={staffCom.language['gx6008-000158']} value={props.searchVal}
                                         onChange={props.searchValChange}
                                         onKeyPress={(e)=>{
                                             if(e.nativeEvent.keyCode === 13){
                                                 props.searchClick();
                                             }
                                         }}
                                />
                                <div className={'search-btn'} onClick={()=>{
                                    props.searchClick();
                                }}>
                                    <span className="icon hrfont">&#xe783;</span>
                                    {staffCom.language['gx6008-000159']}
                                </div>
                            </div>
                        </If>
                        {/*高级按钮*/}
                        <If condition={staffCom.page !== COMMON.pageReg}>
                            <div className={'adv-btn'} onClick={()=>{
                                action.headerAct.clickAdv();
                            }}>
                                {state.rotateAdvIcon?staffCom.language["gx6008-000161"]:staffCom.language["gx6008-000160"]}
                                <span className={`icon hrfont ${state.rotateAdvIcon}`}>&#xe639;</span>{/*下拉箭头*/}
                            </div>
                        </If>
                    </div>
                </If>
            </div>
            <div className={'detail-right'}>
                <NCButton
                    onClick={action.headerAct.clickExport}
                >
                    {staffCom.language['gx6008-000184']/** 导出 */}
                </NCButton>
                <If condition={showAdvBtn}>
                    <div className={'button-more'} onClick={() => {
                        action.headerAct.clickShowMore();
                    }}>
                        {staffCom.language[buttonMore[curIndex].label]}
                        <span className={`icon hrfont ${state.rotateMoreIcon}`}>&#xe639;</span>{/*下拉箭头*/}
                    </div>
                </If>
                <If condition={state.showDropList}>
                    <div className={'drop-list'}>
                        {buttonMore.map((item, index) => {
                            if (index !== curIndex) {
                                return <div onClick={() => {
                                    action.headerAct.jump(item.key)
                                }} className={'drop-item'}>
                                    {staffCom.language[item.label]}
                                </div>
                            }
                        })}
                    </div>
                </If>
            </div>
        </div>
    );

});

export default connect(DetailHeader);
